<template>
	<div class="screen-container" :style="containerStyle"> 
		<header class="screen-header">
			<div>
				<img :src="headerSrc" alt="" />
			</div>
			<span class="logo">
				<!-- <img :src="logSrc" alt="" /> -->
			</span>
			<span class="title" :style="containerStyle">电商实时监控系统</span>
			<div class="title-right">
				<img :src="themeSrc" class="qiehuan" @click="handChangeTheme"/>
				<span class="datetime">{{state.nowTime}}</span>
			</div>
		</header>
		<div class="screen-body">
			<section class="screen-left">
				<div id="left-top" :class="state.fullScreenStatus.trend ? 'fullscreen' : ''">
					<!-- 销量趋势图表 -->
					<Tread ref="trend"></Tread>
					<div class="resize">
						<!-- icon-compress-alt -->
						<span
							@click="changeSize('trend')"
							:class="['iconfont', state.fullScreenStatus.trend ? 'icon-compress-alt' : 'icon-expand-alt']"
						></span>
					</div>
				</div>
				<div id="left-bottom" :class="state.fullScreenStatus.seller ? 'fullscreen' : ''">
					<!-- 商家销售金额图表 -->
					<Seller ref="seller"></Seller>
						<div class="resize">
						<!-- icon-compress-alt -->
						<span
							@click="changeSize('seller')"
							:class="['iconfont', state.fullScreenStatus.seller ? 'icon-compress-alt' : 'icon-expand-alt']"
						></span>
					</div>
				</div>
			</section>

			<section class="screen-middle">
				<div
					id="middle-top"
					:class="state.fullScreenStatus.map ? 'fullscreen' : ''"
				>
					<!-- 商家分布图表 -->
					<Map ref="map"></Map>
					<div class="resize">
						<!-- icon-compress-alt -->
						<span
							@click="changeSize('map')"
							:class="['iconfont', state.fullScreenStatus.map ? 'icon-compress-alt' : 'icon-expand-alt']"
						></span>
					</div>
				</div>
				<div
					id="middle-bottom"
					:class="state.fullScreenStatus.rank ? 'fullscreen' : ''"
				>
					<!-- 地区销量排行图表 -->
					<Rank ref="rank"></Rank>
					<div class="resize">
						<!-- icon-compress-alt -->
						<span
							@click="changeSize('rank')"
							:class="['iconfont', state.fullScreenStatus.rank ? 'icon-compress-alt' : 'icon-expand-alt']"
						></span>
					</div>
				</div>
			</section>
			<section class="screen-right">
				<div
					id="right-top"
					:class="state.fullScreenStatus.hot ? 'fullscreen' : ''"
				>
					<!-- 热销商品占比图表 -->
					<Hot ref="hot"></Hot>
					<div class="resize">
						<!-- icon-expand-alt -->
						<span
							@click="changeSize('hot')"
							:class="['iconfont', state.fullScreenStatus.hot ? 'icon-compress-alt' : 'icon-expand-alt']"
						></span>
					</div>
				</div>
				<div
					id="right-bottom"
					:class="state.fullScreenStatus.stock ? 'fullscreen' : ''"
				>
					<!-- 库存销量分析图表 -->
					<Stock ref="stock"></Stock>
					<div class="resize">
						<!-- icon-compress-alt -->
						<span
							@click="changeSize('stock')"
							:class="['iconfont', state.fullScreenStatus.stock ? 'icon-compress-alt' : 'icon-expand-alt']"
						></span>
					</div>
				</div>
			</section>
		</div>
	</div>
</template>

<script lang='ts' setup>
import Hot from '@/components/Hot.vue'
import Map from '@/components/Map.vue'
import Rank from '@/components/Rank.vue'
import Seller from '@/components/Seller.vue'
import Stock from '@/components/Stock.vue'
import Tread from '@/components/Tread.vue'
import {computed, ref, reactive, nextTick, getCurrentInstance, onUnmounted} from 'vue'
import socketService from '../api/socket_sever'
import {getquanp, themeChange} from '../api/api'
import { useStore } from 'vuex'
import { getThemeValue } from '@/utils/theme_utils'
import moment from 'moment';

	const store = useStore()
	const instance: any = getCurrentInstance()
	const trend = ref<HTMLElement>()
	const seller = ref<HTMLElement>()
	const map = ref<HTMLElement>()
	const rank = ref<HTMLElement>()
	const hot = ref<HTMLElement>()
	const stock = ref<HTMLElement>()
    const state = reactive<{
		fullScreenStatus: {[key:string]: boolean}
		timer: number
		nowTime: string
	}>({
		fullScreenStatus: {
          trend: false,
          seller: false,
          map: false,
          rank: false,
          hot: false,
          stock: false
		},
		timer: 0,
        nowTime: ''
	})
	const logSrc = computed(() => {
		const userImgSrc = require('/public/img/' + getThemeValue(store.state.theme).logoSrc);
		return  userImgSrc
	})
	const headerSrc = computed(() => {
		const userImgSrc = require('/public/img/' + getThemeValue(store.state.theme).headerBorderSrc);
		return  userImgSrc
	})
	const themeSrc = computed(() => {
		const userImgSrc = require('/public/img/' + getThemeValue(store.state.theme).themeSrc);
		return  userImgSrc
	})
	const containerStyle = computed(() => {
		return  {
			backgroundColor: getThemeValue(store.state.theme).backgroundColor,
			color: getThemeValue(store.state.theme).titleColor
		}
	})
	state.timer = setInterval(() => {
      state.nowTime = moment(new Date()).format('YYYY.MM.DD HH:mm:ss dddd');
	});
	const recvData = ( 
	data: {
      chartName: "trend"
      value: true
	}) => {
    //   state.fullScreenStatus = data
	const name = data.chartName
	const value = data.value
	state.fullScreenStatus[name] = value
	nextTick(()=>{
      instance.ctx.$refs[name].screenAdapter()
    })
	}
	const recvthemeChange = (data:{value: string}) => {
     store.commit('changeTheme',data.value)
	}
	socketService.Instance.registerCallBack('fullScreen', recvData)
	socketService.Instance.registerCallBack('themeChange', recvthemeChange)
	const changeSize = async (data: string) => {
		const value = !state.fullScreenStatus[data];
		await getquanp(data, value)
	}
	onUnmounted(() => {
    socketService.Instance.unRegisterCallBack('fullScreen')
    socketService.Instance.unRegisterCallBack('themeChange')
	clearInterval(state.timer)
  })
  const handChangeTheme = () => {
	store.state.theme === 'vintage' ? themeChange('chalk') : themeChange('vintage')
	store.state.theme === 'chalk' ? store.commit('changeColor', '#222733') : store.commit('changeColor', '#fff')
  }
</script>
<style lang="less" scoped>
// 全屏样式的定义
.fullscreen {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	z-index: 100;
}

.screen-container {
	width: 100%;
	height: 100%;
	padding: 0 20px;
	background-color: #161522;
	color: #fff;
	box-sizing: border-box;
}
.screen-header {
	width: 100%;
	height: 64px;
	font-size: 20px;
	position: relative;
	> div {
		img {
			width: 100%;
		}
	}
	.title {
		position: absolute;
		left: 50%;
		top: 50%;
		font-size: 20px;
		transform: translate(-50%, -50%);
	}
	.title-right {
		display: flex;
		align-items: center;
		position: absolute;
		right: 0px;
		top: 50%;
		transform: translateY(-80%);
	}
	.qiehuan {
		width: 28px;
		height: 21px;
		cursor: pointer;
	}
	.datetime {
		font-size: 15px;
		margin-left: 10px;
	}
	.logo {
		position: absolute;
		left: 0px;
		top: 50%;
		transform: translateY(-80%);
		img {
			height: 35px;
			width: 128px;
		}
	}
}
.screen-body {
	width: 100%;
	height: 100%;
	display: flex;
	margin-top: 10px;
	.screen-left {
		height: 100%;
		width: 27.6%;
		#left-top {
			height: 53%;
			position: relative;
		}
		#left-bottom {
			height: 31%;
			margin-top: 25px;
			position: relative;
		}
	}
	.screen-middle {
		height: 100%;
		width: 41.5%;
		margin-left: 1.6%;
		margin-right: 1.6%;
		#middle-top {
			width: 100%;
			height: 56%;
			position: relative;
		}
		#middle-bottom {
			margin-top: 25px;
			width: 100%;
			height: 28%;
			position: relative;
		}
	}
	.screen-right {
		height: 100%;
		width: 27.6%;
		#right-top {
			height: 46%;
			position: relative;
		}
		#right-bottom {
			height: 38%;
			margin-top: 25px;
			position: relative;
		}
	}
}
.resize {
	position: absolute;
	right: 20px;
	top: 20px;
	cursor: pointer;
}
</style>
